<template>
	<view>
		<view class="vip-head-box">
			<view class="l-head-img"><image :src="userInfo.avatar"></image></view>
			<view class="r-detail">
				<!-- <view class="card-name">{{ userInfo.is_vip == 1 ? '月卡' : userInfo.is_vip == 2 ? '季卡' : '月卡' }}</view> -->
				<!-- <view class="card-num">卡号 {{ userInfo.vip_card }}</view> -->
				<view class="card-time" v-if="userInfo.vip_time">有效时间 {{ $tools.getdateNoTime(userInfo.vip_time * 1000) }}</view>
        <view class="card-time" v-else>暂未开通会员</view>
			</view>
		</view>

		<view class="top-up-box">
			<view class="top-up-title">充值记录</view>
			<view class="top-up-list">
				<view class="top-up-item" v-for="(item,index) in orderList" :key="index">
					<view class="top-l-detail">
						<div class="top-l-name">{{ item.name }}</div>
						<div class="top-l-time">{{ $tools.getdateNoTime(item.createtime * 1000) }}</div>
					</view>
					<view class="top-r-money">
						+￥{{ item.price }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				page: 1,
				total: 0,
				orderList: []
			}
		},
		onLoad() {
			this.initVipList()
			if (uni.getStorageSync('userInfo')) this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			initVipList() {
				let { page } = this
				this.$https('vip.vipOrderList', {
					page
				}).then(res => {
					if (res.code) {
						let { list, count } = res.data;
						this.total = count
						this.orderList.push(...list)
					}
				})
			}
		},
		onReachBottom() {
			let { list, count } = this
			if (list.length < count) {
				++this.page
				this.initVipList()
			} else {
				uni.showToast({
					title: '已经到底了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.vip-head-box {
	width: 100%;
	// height: 254rpx;
	background: #504E4F linear-gradient(270deg, #DBB377 0%, #F8D7AB 100%);
	padding: 32rpx 24rpx;
	display: flex;
	margin-bottom: 74rpx;
	display: flex;
	align-items: center;
	.l-head-img {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.r-detail {
		.card-name {
			font-size: 40rpx;
			color: white;
			margin-bottom: 24rpx;
			line-height: 1;
			font-weight: 500;
		}
		.card-num, .card-time {
			font-size: 28rpx;
			color: white;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
	}
}
.top-up-box {
	padding: 0 24rpx;
	.top-up-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 32rpx;
	}
	.top-up-list {
		width: 100%;
		background-color: white;
		border-radius: 20rpx;
		padding: 0 23rpx;
		.top-up-item {
			padding: 45rpx 0;
			box-sizing: border-box;
			width: 100%;
			border-bottom: solid 1rpx #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top-l-detail {
				.top-l-name {
					font-size: 32rpx;
					color: #333333;
					font-weight: 500;
					margin-bottom: 30rpx;
				}
				.top-l-time {
					font-size: 28rpx;
					color: #666666;

				}
			}
			.top-r-money {
				font-size: 44rpx;
				color: #FF6121;
			}
		}
	}
}
</style>
